<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form ref="queryFormRef" :model="queryForm" class="ele-form-search" label-width="auto"
               @keyup.enter.native="query"
               @submit.native.prevent>
        <el-row :gutter="15" type="flex" style="flex-wrap: wrap">
          <el-col :xl="6" :lg="8" :md="12">
            <el-form-item label="选择时间：">
              <CustomDate :type.sync='queryForm.type' v-model="queryForm.date"/>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="8" :md="12">
            <el-form-item label="部门：">
              <el-select v-model="queryForm.dept_id" placeholder="请选择部门" style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xl="6" :lg="8" :md="12">
            <div class="ele-form-actions">
              <el-button :loading="loading" class="ele-btn-icon" icon="el-icon-search" type="primary" @click="query">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ele-body" shadow="never" v-loading="loading">
      <div class="content">
        <Echarts1 :data="echartsData"/>
      </div>
    </el-card>
  </div>
</template>
<script>
import CustomDate from "./components/CustomDate.vue"
import Echarts1 from "./components/Echarts1.vue"

export default {
  components: {CustomDate, Echarts1},
  data() {
    return {
      loading: false,
      queryForm: {
        type: null
      },
      echartsData: [],
      options: [],
    }
  },
  mounted() {
    this.handleQueryData()
    this.handleQueryParams()
  },
  methods: {
    query() {
      let form = {...this.queryForm}
      delete form.date
      if (this.queryForm.date?.length) {
        form.month_start = this.queryForm.date[0]
        form.month_end = this.queryForm.date[1]
      }
      this.handleQueryData(form)
    },
    reset() {
      this.queryForm = {}
      this.query()
    },
    async handleQueryData(form) {
      this.loading = true
      const res = (await this.$http.get('/reports/work_order_tendency', {params: form})).data
      res.success ? this.echartsData = res.data : this.$message.error(res.msg)
      this.loading = false
    },
    handleQueryParams() {
      this.$http.get('dept/index').then(res => {
        res.data.code === 0 ? this.options = res.data.data : this.$message.error(res.data.msg);
      })
    },
  },
}
</script>

<style scoped lang="scss">
.ele-form-actions {
  margin-bottom: 0;
}

::v-deep .ele-form-search {
  margin-bottom: 0;
}

.el-form-item {
  margin-bottom: 0;
}
</style>
